<template>
  <div id="box">
    <TopBack title="订单"></TopBack>
    <van-tabs v-model="active">
      <van-tab title="全部">
      <div
          class="hotelList clearfix"
          v-for="(item, index) in xunhuan"
          :key="index"
        >
          <div class="title clearfix">
            <p>{{ item.hotelName }}</p>
            <span @click="xiangqing(item, index)">&nbsp;&nbsp;订单详情 </span>
            <span>{{ item.xiaofei }}</span>
          </div>
          <div class="list-left">
            <img :src="item.poto" alt="" />
          </div>
          <div class="list-right clearfix">
            <div class="right-top clearfix">
              <h4>{{ item.roomName }}</h4>
              <p>
                ￥{{ item.price }}
                <span>x{{ item.sum }}</span>
              </p>
            </div>
            <p class="serve">
              经济双床房-限时优惠+环境舒适+品质服务无早一间一晚
            </p>
            <p class="date">入离日期：{{ item.start }}-{{ item.end }}</p>
            <p class="sum">
              合计：￥<span>{{ item.money }}</span>
            </p>
          </div>
        </div>
      </van-tab>

      <!-- 待付款页面 -->
      <van-tab title="待付款">
        <div
          class="hotelList clearfix list2"
          v-for="(item, index) in noprice"
          :key="index"
        >
          <div class="title clearfix">
            <p>{{ item.hotelName }}</p>
            <span
              >待付款，剩余：<van-count-down :time="time" format="mm:ss"
            /></span>
            <span @click="xiangqing(item, index)">订单详情&nbsp;&nbsp; </span>
          </div>
          <div class="list-left">
            <img :src="item.poto" alt="" />
          </div>
          <div class="list-right clearfix">
            <div class="right-top clearfix">
              <h4>{{ item.roomName }}</h4>
              <p>
                ￥{{ item.price }}
                <span>x{{ item.sum }}</span>
              </p>
            </div>
            <p class="serve">
              经济双床房-限时优惠+环境舒适+品质服务无早一间一晚
            </p>
            <p class="date">入离日期：{{ item.start }}-{{ item.end }}</p>
            <p class="sumPrice">
              总价：￥<span>{{ item.money }}</span>
            </p>
            <van-button type="default" class="pay" @click="goPay(item, index)"
              >付款</van-button
            >
          </div>
        </div>
      </van-tab>

      <!-- 待使用页面 -->
      <van-tab title="待使用">
        <div
          class="hotelList clearfix list3"
          v-for="(item, index) in allprice"
          :key="index"
        >
          <div class="title clearfix">
            <p>{{ item.hotelName }}</p>

            <span class="price">￥{{ item.money }}</span>
            <span @click="xiangqing(item, index)">订单详情&nbsp;&nbsp; </span>
          </div>
          <div class="list-left">
            <img :src="item.poto" alt="" />
          </div>
          <div class="list-right clearfix">
            <div class="right-top clearfix">
              <h4>{{ item.roomName }}</h4>
              <div class="tip">
                <p style="color: #033e98">预订成功</p>
              </div>
            </div>
            <p class="address clearfix">{{ item.adress }}</p>
            <p class="date">入离日期：{{ item.start }}-{{ item.end }}</p>
          </div>
        </div>
        <!-- <p style="font-size: 12px; text-align: center; color: #98999e; margin:0;">
          只展示最近一年内的50条订单
        </p> -->
      </van-tab>
      <van-tab title="待评价">
        <!-- 待评价页面 -->
        <div class="hotelList clearfix list4">
          <div class="title clearfix">
            <p>七天假日酒店</p>
          </div>
          <div class="list-left">
            <img
              src="https://p0.meituan.net/320.0/tdchoteldark/f37347e253b9ca822a6852c8fa293919296413.jpg"
              alt=""
            />
          </div>
          <div class="list-right clearfix">
            <div class="right-top clearfix">
              <h4>雅克 • 精品酒店</h4>
            </div>
            <p class="date">下单时间：2021/12/30 12:30:29</p>
            <p class="pSum">总价：￥<span>103.00</span></p>
            <van-button type="default" class="pingjia" @click="goComment"
              >评价</van-button
            >
          </div>
        </div>
      </van-tab>
      <van-tab title="退款/售后">
        <!-- 退款/售后页面 -->
        <p v-if="tuikuan==''" style="text-align: center; font-size: 14px; color: #98999e">
          暂没有退款订单呦！
        </p>
        <div class="hotelList clearfix list5"  v-for="(item, index) in tuikuan"
          :key="index" v-else>
          <div class="title clearfix">
            <p>{{item.hotelName}}</p>
          </div>
          <div class="list-left">
            <img
              :src="item.poto"
              alt=""
            />
          </div>
          <div class="list-right clearfix">
            <div class="right-top clearfix">
              <h4>{{item.roomName}}</h4>
            </div>
            <p class="date">下单时间：{{item.thisTime}}</p>
            <p class="pSum">总价：￥<span>{{item.money}}</span></p>
            <van-button type="default" class="del" @click="delRecord(item,index)"
              >删除记录</van-button
            >
            <van-button type="default" class="xiangqing" @click="xiangqing(item, index)"
              >查看详情</van-button
            >
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import TopBack from "../../components/TopBack";
import { getAllProductList } from "../../api/hotelApi.js";
import { getRoomType } from "../../api/roomApi.js";
import { getServeType } from "../../api/ServeApi.js";
export default {
  components: { TopBack },
  data() {
    return {
      active: 0,
      time: 30 * 60 * 1000,
      xunhuan: [],
      noprice: [],
      allprice: [],
      tuikuan: [],
    };
  },
  created() {
    this.xunhuan = this.$store.state.shuju;
    // console.log(this.xunhuan);
  },
  mounted() {
    var nonPayment = this.$store.state.shuju;
    nonPayment.forEach((elem, index) => {
      if (elem.tuikuan == false) {
        if (elem.payOrno == false) {
          this.noprice.push(elem);
          elem.xiaofei = "未消费";
        } else {
          this.allprice.push(elem);
          elem.xiaofei = "已消费";
        }
      } else {
        this.tuikuan.push(elem);
        elem.xiaofei = "已退款";
      }
    });
    //  console.log( this.noprice);
    getAllProductList().then((res) => {
      this.xunhuan.forEach((elem, index) => {
        let hotel = res.data;
        hotel = hotel.filter((item) => item.hotelId == elem.hotelId);
        // console.log(hotel);
        this.xunhuan[index].hotelName = hotel[0].name;
        this.xunhuan[index].poto = hotel[0].indexImage;
      });
      this.noprice.forEach((elem, index) => {
        let hotel = res.data;
        hotel = hotel.filter((item) => item.hotelId == elem.hotelId);
        // console.log(hotel);
        this.noprice[index].hotelName = hotel[0].name;
        this.noprice[index].poto = hotel[0].indexImage;
      });
      this.allprice.forEach((elem, index) => {
        let hotel = res.data;
        hotel = hotel.filter((item) => item.hotelId == elem.hotelId);
        // console.log(hotel);
        this.allprice[index].hotelName = hotel[0].name;
        this.allprice[index].poto = hotel[0].indexImage;
        this.allprice[index].adress = hotel[0].adress;
      });
       this.tuikuan.forEach((elem, index) => {
        let hotel = res.data;
        hotel = hotel.filter((item) => item.hotelId == elem.hotelId);
        // console.log(hotel);
        this.tuikuan[index].hotelName = hotel[0].name;
        this.tuikuan[index].poto = hotel[0].indexImage;
        this.tuikuan[index].adress = hotel[0].adress;
      });
    });
    getRoomType().then((res) => {
      this.xunhuan.forEach((elem, index) => {
        let room = res.data;
        room = room.filter((item) => item.roomId == elem.roomId);
        this.xunhuan[index].roomName = room[0].roomType;
        this.xunhuan[index].price = room[0].price;
      });
      this.noprice.forEach((elem, index) => {
        let room = res.data;
        room = room.filter((item) => item.roomId == elem.roomId);
        this.noprice[index].roomName = room[0].roomType;
        this.noprice[index].price = room[0].price;
      });
      this.allprice.forEach((elem, index) => {
        let room = res.data;
        room = room.filter((item) => item.roomId == elem.roomId);
        this.allprice[index].roomName = room[0].roomType;
        this.allprice[index].price = room[0].price;
      });
    this.tuikuan.forEach((elem, index) => {
        let room = res.data;
        room = room.filter((item) => item.roomId == elem.roomId);
        this.tuikuan[index].roomName = room[0].roomType;
        this.tuikuan[index].price = room[0].price;
      });
    });
    
    
  },
  methods: {
    // 付款
    goPay(item, index) {
      // console.log(item,index);
      
      this.$store.commit("removeCart", item);
      //  this.noprice.splice(index,1)
      this.$router.push({
        path: "/pay",
        query: {
          hotelId: item.hotelId,
          roomId: item.roomId,
          money: item.money,
          username: item.username,
          usertel: item.usertel,
          start: item.start,
          end: item.end,
          sum: item.sum,
        },
      });
    },
    // 评论
    goComment() {
      this.$router.push({ path: "/comment" });
    },
    // 详情
    xiangqing(item, index) {
      // console.log(item,index);
      this.$router.push({
        path: "/particluars",
        query: {
          hotelId: item.hotelId,
          roomId: item.roomId,
          money: item.money,
          username: item.username,
          usertel: item.usertel,
          start: item.start,
          end: item.end,
          sum: item.sum,
          payOrno: item.payOrno,
          thisTime: item.thisTime,
        },
      });
    },
     // 删除记录
    delRecord(item,index){
      this.$store.commit("removeCart", item);
      this.tuikuan.splice(index,1)
    },
  },
};
</script>

<style lang="less" scoped>
html {
  background-color: #f5f6f8;
  // margin-bottom: 10px;
}
#box{
  margin-bottom:50px;
}
.van-tabs {
  width: 100%;
  height: 100%;
  background-color: #f5f6f8;
  .van-tabs__line {
    background-color: #033e98;
  }
  .hotelList:last-of-type{
    margin-bottom: 60px;
  }
  .hotelList {
    width: 87%;
    height: 20%;
    background-color: #fff;
    font-size: 14px;
    border-radius: 10px;
    margin: 12px;
    padding: 12px;
    .title {
      p {
        float: left;
        margin-top: -2px;
      }
      span {
        float: right;
        color: #033e98;
        .van-count-down {
          float: right;
        }
      }
    }

    .list-left {
      float: left;
      width: 30%;
      height: 60%;
      margin-top: 10px;
      img {
        width: 80%;
        height: 80%;
        border-radius: 6px;
      }
    }
    .list-right {
      float: left;
      width: 70%;
      height: 80%;
      .right-top {
        h4 {
          margin: 0;
          float: left;
        }
        p {
          float: right;
          margin: 0;
          span {
            color: #959595;
            font-size: 12px;
          }
        }
      }
      .serve {
        font-size: 10px;
        color: #959595;
        width: 75%;
      }
      .date {
        font-size: 10px;
        color: #959595;
      }
      .sum {
        float: right;
        margin: 0;
        span {
          color: #033e98;
        }
      }
    }
  }
}
.list2 {
  .sumPrice {
    float: left;
    margin-top: -5px;
  }
  .date {
    margin-top: -5px;
  }
  .pay {
    float: right;
    width: 30%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #d1d3d2;
    border-radius: 5px;
  }
}
.list3 {
  height: 20%;
  .price {
    font-weight: 700;
    margin-right: 10px;
  }
  .address {
    height: 30px;
    line-height: 30px;
    margin: 0;
  }
  .date {
    margin: 0;
  }
}
.list4 {
  .list-right {
    .pSum {
      margin: 0;
    }
    .pingjia {
      float: right;
      width: 30%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #d1d3d2;
      border-radius: 5px;
      margin-top: -10px;
    }
  }
}
.list5{
    .van-button{
      width:40%;
      height:30px;
      line-height:30px;
      border: 1px solid #d1d3d2;
      border-radius: 5px;
      margin-right:10px;
    }
}
</style>
